<script setup>
import { ref } from "vue";
import tableData from "./json/data.json";

defineOptions({
  name: 'MyVxeTable'
})

const fixRow = ref(3);
// 设置行类名
const getRowClassName = ({ row, rowIndex, $rowIndex }) => {
  if (fixRow.value && rowIndex < fixRow.value) {
    return `vxe-table__row--fixed-top`;
  }
  return "";
};
// 设置行样式
const getRowStyle = ({
  row,
  rowIndex,
  $rowIndex,
  column,
  columnIndex,
  $colum,
}) => {
  // console.log("column", row,
  // rowIndex,
  // $rowIndex,
  // column,
  // columnIndex,
  // $colum);
  if (fixRow.value && rowIndex < fixRow.value) {
    return {
      top: `${48 * rowIndex}px`,
      // left: column.width +'px',
    };
  }
  return "";
};

const getCellClassName = ( rowIndex,
  $rowIndex,
  column,
  columnIndex,
  $colum) => {
    // console.log(888,78978)
  };
</script>

<template>
  <div style="width: calc(100vw - 200px); height: 100vh">
    <vxe-table
      border
      height="100%"
      :data="tableData"
      :row-class-name="getRowClassName"
      :row-style="getRowStyle"
      :cell-class-name="getCellClassName"
    >
      <vxe-colgroup title="基本信息" fixed="left">
        <vxe-column type="seq" width="70" fixed="left"></vxe-column>
        <vxe-column
          field="name"
          title="Name"
          fixed="left"
          width="180"
        ></vxe-column>
      </vxe-colgroup>
      <vxe-colgroup title="更多信息">
        <vxe-column field="role" title="Role" width="300"></vxe-column>
        <vxe-column field="age" title="Age" width="200"></vxe-column>
        <vxe-colgroup title="详细信息">
          <vxe-column field="sex" title="Sex" width="200"></vxe-column>
          <vxe-column field="num" title="Num" width="200"></vxe-column>
        </vxe-colgroup>
      </vxe-colgroup>
      <vxe-colgroup title="额外信息" fixed="right">
        <vxe-column
          field="date3"
          title="Date"
          fixed="right"
          width="140"
        ></vxe-column>
        <vxe-column
          field="address"
          title="Address"
          fixed="right"
          width="200"
          show-overflow
        ></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<style lang="scss" scoped>
:deep(.vxe-table) {
  .vxe-table--body-wrapper {
    .vxe-table--body {
      .vxe-table__row--fixed-top {
        position: sticky;
        background-color: #fff;
        z-index: 1;
        
      }
    }
  }
}
</style>
